<template>
  <div class="pdfDetail">
    <page-title :title="titleName" ref="pageTitle"></page-title>
    <pdf
      :src="pdfUrl"
      class="pdfstyle"
      v-for="i in numPages"
      :key="i"
      :page="i"
    ></pdf>
    <div v-show="isHide" class="loading">
      <div class="loadingBox">
        <div class="loadingInner">
          <img src="/static/img/loading.gif" class="image" />
        </div>
      </div>
    </div>
    <div class="btnBox footerDiv">
      <p class="tip">阅读完毕后继续操作</p>
      <div class="agree" @click="jumpFn">阅读并同意</div>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
// import Base64 from "@/assets/js/base64.js";
export default {
  components: {
    pdf,
    pageTitle: (resolve) => require(["@/components/musicTitle"], resolve),
  },
  data() {
    return {
      pdfUrl:
        "https://aaeasy-file.newbanker.cn/pic/testforyuhan/裴士杰的专属报告_2021-11-02_11_17_21.pdf",
      fundCode: this.$utils.getParams(this, "fundCode"),

      numPages: 1, //  pdf 文件总页数
      isHide: true,
      titleName: "产品资料概要",
    };
  },
  created() {
    this.getNumPages(this.pdfUrl);
  },
  methods: {
    getNumPages(url) {
      this.pdfUrl = pdf.createLoadingTask(url);
      this.pdfUrl.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          this.isHide = false;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
    jumpFn() {
      /*
              let Base64 = require('js-base64').Base64;
              // 页面的埋点，
              sensors.track('app_click', {
                   // fundName: new Base64().encode(_this.fundData.secuSht), //基金名称
                      title: '公募产品概要',
                      pdfUrl: this.pdfUrl,
                      fundCode:this.fundCode,
                      element_content: '阅读并知晓',
               });
               // 这里做进有三个参数，一个是pdf地址，linkUrl同意按钮跳转地址，needAppProcess决定打开的是vue页还是jquery页，Base64 是要解码一下，
               this.$urls.routerPush(this, Base64.decode(this.$utils.getParams(this, 'linkUrl')),{}, this.$utils.getParams(this, 'needAppProcess'));
               */
    },
  },
};
</script>
<style scoped lang="scss">
.mr10,
.page {
  width: 1.5rem;
  height: 0.5rem;
  background: #ddd;
  border-radius: 0.05rem;
  display: inline-block;
  line-height: 0.5rem;
  text-align: center;
  position: relative;
  margin-right: 0.3rem;
  margin-top: 0.5rem;

  .swiper-button-prev {
  }
}

.title {
  text-align: center;
  margin-bottom: 0.5rem;
}

.title {
  text-align: center;
  margin-bottom: 0.5rem;
}

//  swiper
.tabContain {
  padding: 0.2rem;

  .vs {
    border: 1px solid #fdd;
    margin: 0 0.3rem;
    overflow: hidden;
    min-height: 2.9rem;
  }
}

.tab {
  overflow: hidden;
  position: relative;
  margin-left: 0.3rem;
  height: 0.7rem;

  &::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #e6e6e6;
  }

  #tabApp {
    width: 100%;
    overflow: hidden;

    .swiper-slide {
      width: auto;
      flex-shrink: 0;
      font-size: 0.32rem;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #333333;
      line-height: 0.48rem;
      padding: 0.1rem 0.15rem;

      &.active {
        font-size: 0.34rem;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: bold;
        color: #000000;
      }

      span {
        transition: all 0.3s ease;
        display: block;
      }

      &:first-child {
        padding-left: 0;
      }
    }
  }
}

.w100 {
  width: 100%;
}

.swiper-slide {
  // border: 1px solid #ddd;
}

.swiper-slide.active {
  font-size: 0.34rem;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: bold;
  color: #000000;
}

.loading {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
}
.agree {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1rem;
  background: linear-gradient(to right, #6376bb, #122471);
  color: #fff;

  line-height: 1rem;
  font-size: 0.24rem;
}
.pdfstyle {
  width: 100%;
}
.btnBox {
  position: fixed;
  bottom: 1rem;
  text-align: center;
  width: 100%;
  .tip {
    position: absolute;
    color: #bb9163;
    background: #fbe1bc;
    line-height: 0.6rem;
    height: 0.6rem;
    bottom: 0;
    width: 100%;
  }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .pdfDetail {
    padding-bottom: calc(1.58rem + env(safe-area-inset-bottom));
  }
  .footerDiv {
    background-color: #fff;
    height: calc(0.98rem + env(safe-area-inset-bottom)) !important;
  }
}
.loading {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
}
.loadingBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 0.7rem;
}
.loadingBox .loadingInner {
  position: absolute;
  width: 2.64rem;
  height: 2.64rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.loadingBox .loadingInner .image {
  width: 2.2rem;
  height: 2.2rem;
}
</style>
